<%@ page import="java.util.Date" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>爱购物-商城 - 首页</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css"/>
</head>
<body>
<c:import url="/front/header"/>
<div id="register" class="wrap clearfix">
    <div class="shadow">
        <em class="corner lb"></em>
        <em class="corner rt"></em>
        <div class="box">
            <h1>欢迎回到爱购物-商城</h1>
            <form id="loginForm" method="post" action="">
                <table>
                    <c:if test="${!empty errorMsg}">
                        <tr>
                            <td colspan="2" style="text-align: center; color: red">${errorMsg}</td>
                        </tr>
                    </c:if>
                    <tr>
                        <td class="field"><label for="username">用户名：</label></td>
                        <td><input class="text" type="text" id="username" name="username" value="${param.username}"/><span></span></td>
                    </tr>
                    <tr>
                        <td class="field"><label for="password">登录密码：</label></td>
                        <td><input class="text" type="password" id="password" name="password"/><span></span></td>
                    </tr>
                    <tr>
                        <td class="field"><label for="verycode-input">验证码：</label></td>
                        <td><input class="text verycode" type="text" name="veryCode" id="verycode-input"/>
                            <img id="veryCode" alt="看不清,换一张" style="cursor:hand;"
                                src="${pageContext.request.contextPath}/VerifyCode?<%=new Date().getTime() %>"/>
                            <span id="msg"></span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><label class="ui-green"><input type="button" id="sub" value="立即登录"/></label>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
<c:import url="/static/page/footer.jsp"/>
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.1.min.js"></script>
<script>
    $(function () {
        // 更新验证码
        $("#veryCode").click(function () {
            $(this).attr("src","${pageContext.request.contextPath}/VerifyCode?"+Math.random())
        });

        // 提交表单
        $("#sub").click(function () {
            if ($('#username').val()===""){
                alert("用户名不能为空");
                $('#username').focus();
                return;
            }
            if ($('#password').val()===""){
                alert("密码不能为空");
                $('#password').focus();
                return;
            }
            if ($("#verycode-input").val()===""){
                alert("验证码不能为空");
                $('#verycode-input').focus();
                return;
            }
            const url = "${pageContext.request.contextPath}/VerifyCode";
            const param = {'VerifyCode':$("#verycode-input").val()};
            $.post(url,param,function (data) {
                if (!data.result){
                    alert("验证码错误，请重新输入！");
                    $("#verycode-input").val("");
                    $("#veryCode").click();
                }else{
                    $("#loginForm").submit();
                }
            });
        });
    });


</script>
</body>
</html>

